<template>
	<view>
		<view :class="['navbar',isScroll === true ? 'nav-fixed':'nav-normal']" :style="{ 'height': navheight +parseInt(slotheight)+ 'px' ,'background-color' : bgcolor}">
			<view :style="{ 'height': navheight + 'px' ,'background-color' : bgcolor}">
				<view :style="{'height': statusBarHeight +'px'}"></view>
				<view class="header" @click="getTool" :style="{'height': menuHeight +'px'}">
					<view class="hearder-status">
						<view class="nav-btn" :style="{'width':btnWidth + 'px','height': btnHeight + 'px', 'color': toolcolor}">
							<view style="width: 50rpx;font-weight: 500;height: 50rpx;position: relative;" >
								<text class="iconfont icon-xiangzuo" style="font-size: 40rpx;color: #ffffff;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);"></text>
							</view>
						</view>
					</view>
					<view class="hai" :style="{'line-height': menuHeight +'px'}">
						授权
					</view>
				</view>
			</view>
		</view>
		<image src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20230411/488ca0086209e335401bfbcc2e8ff224.png" class="bg" mode="widthFix"></image>
		<view class="box">
			<view class="wen">
				授权使用
			</view>
			<view style="font-size: 30rpx;color: #999999;line-height: 60rpx;">
				以便于更好的给您提供个性化服务
			</view>
		</view>
		<view class="box1">
			<view style="line-height: 100rpx;width:83%;margin: 20rpx auto;">
				<view style="color: #000;font-size: 28rpx;position: relative;" class="name">
					<image src="../../static/wan1.png" style="width: 30rpx;height: 30rpx;margin-top: 35rpx;margin-right: 10rpx;" mode=""></image>头像
				</view>
				<view style="overflow: hidden;">
					<button class="avatar-wrapper" :hover-class="none" open-type="chooseAvatar" style="float: left;" @chooseavatar="onChooseAvatar">
					  <image class="avatar" :src="touxiang || tu"></image>
					</button>
				</view>
			</view>
			<view class="hang" style="margin-top: 20rpx;">
				<view class="shang">
					<image src="../../static/wan1.png" class="wan" mode=""></image>
					<view class="name">
						昵称
					</view>
				</view>
				<input type="nickname" v-model="name" class="name_input"   placeholder="请输入您的真实姓名" placeholder-class="zhi" />
			</view>
			<view class="hang">

				<view class="shang">
					<image src="../../static/ws2.png" class="wan" mode=""></image>
					<view class="name">
						电话
					</view>
				</view>

				<view style="position: relative;box-sizing: border-box;">
					<input type="text" :disabled="true" v-model="mobile" class="name_input" style="padding-right: 200rpx;box-sizing: border-box;"  placeholder="请授权您的联系电话" placeholder-class="zhi" />
					<!-- <view style="width: 150rpx;height: 60rpx;line-height: 60rpx;text-align: center;font-size: 26rpx;color: #fff;background-color: aqua;border-radius: 30rpx;">
						授权电话
					</view> -->
					<button hover-class="none" @getphonenumber="login1" style="background-color: #1FB0AC;color: #fff;text-align: center;font-size: 24rpx;width: 180rpx;height: 52rpx;line-height: 52rpx;text-align: center;border-radius: 12rpx;position: absolute;top: 50%;right: 20rpx;transform: translateY(-50%);"
							open-type="getPhoneNumber">点击获取</button>
				</view>
			</view>

			<view @click="tongyi" style="width: 620rpx;background-color: #1FB0AC;height: 90rpx;line-height: 90rpx;text-align: center;border-radius: 46rpx;color: #fff;font-size:28rpx ;margin: 200rpx auto 40rpx;">
				授权同意
			</view>

		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				scrollTop: 0,
				navheight: 0,
				statusBarHeight: 0,
				menuHeight: 0,
				haveBack: false,
				btnHeight: 30,
				btnWidth: 70,
				isScroll:true,
				slotheight:'0',
				tu:'https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20230627/d1a899ed21b700f36350cf38ae085a65.png',
				touxiang:'',
				name:'',
				mobile:'',
				group_id:''
			}
		},
		onLoad(option) {
			this.group_id=option.group_id
		},
		methods:{
			login1: function(e) {
				console.log(e)
				let that = this
				uni.login({
					provider: 'weixin',
					success: (code) => {
						console.log(code)
						this.post1('api/wechat/phone', {
							code: code.code,
							iv: e.detail.iv,
							encryptedData: e.detail.encryptedData
						},false).then(res => {
							console.log(res, '123455')
							if (res.code == 1) {
								uni.setStorageSync('mobile', res.data.phoneNumber)
								uni.setStorageSync('mobile2',res.data.mobile2)
								that.mobile=res.data.phoneNumber
							}else{
								uni.showToast({
									title: res.msg,
									icon: "none",
									duration: 1000
								})
							}

						})

					}
				})
			},
			getSysHeightInfo() {
				const that = this
				let statusBarHeight, menuButtonObject, menuHeight, navheight, haveBack, btnHeight, btnWidth

				statusBarHeight = uni.getSystemInfoSync().statusBarHeight
				//#ifdef MP-WEIXIN
				menuButtonObject = uni.getMenuButtonBoundingClientRect()
				menuHeight = menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2
				navheight = menuHeight + statusBarHeight
				btnHeight = menuButtonObject.height
				btnWidth = menuButtonObject.width
				//#endif
				//#ifdef H5
				menuHeight = 44
				navheight = menuHeight + statusBarHeight
				btnHeight = 30
				btnWidth = 70
				//#endif
				if (getCurrentPages().length === 1) { // 当只有一个页面时
					haveBack = false;
				} else {
					haveBack = true;
				}
				that.navheight = navheight
				that.statusBarHeight = statusBarHeight
				that.menuHeight = menuHeight
				that.haveBack = haveBack
			},
			getTool:function(){
				uni.navigateBack({
					delta:1
				})
			},

			onChooseAvatar:function(e){
				let that=this
				console.log(e)
				// this.avatarUrl=e.detail.avatarUrl
				uni.uploadFile({
					url: that.BASE_URL + 'addons/cos/index/uploads', //仅为示例，非真实的接口地址
					filePath: e.detail.avatarUrl,
					name: 'file',
					header: {
						token: uni.getStorageSync('token')
					},
					success: (a) => {
						console.log(JSON.parse(a.data))
						let c = JSON.parse(a.data).data.fullurl
						that.touxiang=c
						// uni.showToast({
						// 	title: '修改成功！',
						// 	icon: "none",
						// 	duration: 1000
						// })
						// that.txxg(c)
						// console.log(that.addimgArray,1234)
					}
				})
			},

			tongyi:function(){
				if(this.touxiang==''){
					uni.showToast({
						title: '请上传头像',
						icon: "none",
						duration: 1000
					})
					return
				}else if(this.name==''){
					uni.showToast({
						title: '请输入您称',
						icon: "none",
						duration: 1000
					})
					return
				}else if(this.mobile==''){
					uni.showToast({
						title: '请点击获取手机号',
						icon: "none",
						duration: 1000
					})
					return
				}else{
					this.post('api/im/im/join_wechat_group',{
						group_id:this.group_id,
						name:this.name,
						avatar:this.touxiang,
						mobile:this.mobile,
						is_check:1
						},true).then(res=>{
						if(res.code==1){
							uni.showToast({
								title: res.msg,
								icon: "none",
								duration: 1000
							})
							setTimeout(function(){
								uni.switchTab({
									url:'/pages/index/xiaoxi'
								})
							},1500)
						}else{
							uni.showToast({
								title: res.msg,
								icon: "none",
								duration: 1000
							})
						}
					})
				}
			},

		},
		mounted() {
			const that = this
			this.getSysHeightInfo()
			//#ifdef H5
			window.onscroll = function() {
				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				if (scrollTop > 1) {
					that.isScroll = true
				} else {
					that.isScroll = false
				}
			}
			//#endif

		},
		watch: {
			scrollTop(newValue, oldValue) {
				//#ifdef MP-WEIXIN
				const that = this
				if (newValue > 1) {
					that.isScroll = true
				} else {
					that.isScroll = false
				}
				//#endif
			}
		}
	}
</script>

<style lang="scss">
	.avatar-wrapper{
		width:106rpx;
		height: 106rpx;
		padding: 0;
		// margin-top: 20rpx;
		// border-radius: 50%;
	}
	.avatar{
		width: 106rpx;
		height: 106rpx;

		// border-radius: 50%;

	}
	page{
		background-color: #F8F8F8!important;
		padding-bottom: 30rpx;
		font-family: Demibold;
	}
	.hai {
		text-align: center;
		font-size: 30rpx;
		color: #000;
	}
	.bg{
		width: 100%;
	}
	.box{
		width: 83%;
		position: absolute;
		top: 240rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	.wen{
		color: #040200;
		font-size: 48rpx;
		font-weight: 600;

		width: 100%;
	}

	.box1{
		width: 100%;
		position: absolute;
		top: 400rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	.hang{
		width: 83%;
		margin: 0 auto 20rpx;
		box-sizing: border-box;
	}
	.shang{
		position: relative;
		padding-left: 40rpx;
		line-height: 80rpx;
		height: 80rpx;
	}
	.wan{
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
	}
	.name{
		color:#000000 ;
		font-size: 28rpx;
		font-weight: 600;
	}
	.name_input{
		width:100%;
		box-sizing: border-box;
		padding: 0 46rpx;
		font-size:30rpx;
		background: #F3F3F3;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 45rpx;
		color: #000000;
	}
	.wei{
		margin-top: 20rpx;
	}
	.zhi{
		color:#CCCCCC ;
	}
	.input{
		height: 90upx;
		width: 100%;
		box-sizing: border-box;
		padding:0 46rpx;
		// margin-left: 40upx;
		display: flex;
		align-items: center;
		display: flex;
		background-color: #F3F3F3;
		border-radius: 45rpx;
		.picker{
			flex: 1;
			height: 100upx;
			// padding-right: 20upx;
			.change{
				height: 100upx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				image{
					width: 14upx;
					height: 24upx;
				}
				text{
					flex: 1;
					font-size: 30upx;
					padding-right: 20upx;
					color: #333333;
					white-space:nowrap;
					overflow:hidden;
					text-overflow:ellipsis;

				}
			}
		}
		text{
			width: 176upx;
			font-size: 30upx;
			color: #333333;

		}
		input{
			flex: 1;
			font-size: 30upx;
			color: #333333;
		}
	}


	// 头部
	.navbar {
		width: 100%;
		overflow: hidden;
		top: 0;
		left: 0;
		z-index: 2;
		flex-shrink: 0;
		color: #fff;
		font-size: 16px;
	}

	.nav-normal {
		position: relative;
	}

	.nav-fixed {
		position: fixed;
	}

	.header {
		position: fixed;
		width: 100%;
	}

	.logo-centent {
		display: flex;
		align-items: center;
	}

	.logo-centent image {
		width: 260rpx;
		height: 68rpx;
		margin-left: 20rpx;
	}

	.hearder-status {
		display: flex;
		align-items: center;
		position: absolute;
		padding-left: 30rpx;
		height: 100%;
		z-index: 99999;

	}

	.header-title {
		height: 100%;
		left: 0;
		right: 0;
		position: absolute;
		margin: auto;
		text-align: center;
	}
	.header-title image{
		position: absolute;
		width:270rpx;
		height: 35rpx;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}

	.header-title-left {
		height: 100%;
		left: 0;
		right: 0;
		position: absolute;
		margin: auto;
		text-align: left;
	}

	.back-text {
		margin-left: 7px;
		width: 100upx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.hearder-status .nav-title-left {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: rgba(0, 0, 0, .8);
		width: 100%;
		font-weight: bold;
	}
	.hearder-status .nav-btn {
		/* background-color: rgba(255, 255, 255, .5);
		border-radius: 15px; */
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: rgba(0, 0, 0, .8);
		width: 50%;
		font-weight: bold;
	}

	.hearder-status .nav-btn .gotback,
	.hearder-status .nav-btn .gothome {
		flex: 1;
		text-align: center;
		font-size: 18px;
	}
	.Addslot {
		position: absolute;
		width: 100%;
	}
</style>